import React from 'react'
import { TitleBar, Button } from '../../../ui-components'
import styleRoot from '../style'
import style from './style.welcome'
import { connect } from 'react-redux'
import tmpl from '../../../libs/underscore-template'

export default 
@connect(({ onboardingTemplate, onboardingFlowsStaff }) => ({ onboardingTemplate, onboardingFlowsStaff }))
class extends React.Component {

  componentDidMount() {
    this.props.fetchOnboardingStaffTemplate()
		this.props.fetchOnboardingCoreProfile()
  }

  componentWillUnmount() {
    this.props.resetOnboardingTemplate()
  }

	template(str) {
    if (!str) return ''
		const { coreProfile } = this.props.onboardingFlowsStaff
		const { teamVO={} } = coreProfile
		let obj = {}
    obj['姓名'] = coreProfile.fullName || ''
		obj['职位'] = coreProfile.jobTitleName || '无'
		obj['汇报对象'] = coreProfile.reporterFullName || '无'
		obj['团队'] = teamVO.teamName || '无'
		return tmpl(str)(obj)
	}

  render() {
    const { onboardingTemplate } = this.props.onboardingTemplate
		const { coreProfile } = this.props.onboardingFlowsStaff
    const { prologue='', epilogue='' } = onboardingTemplate
    return (
      <div>
        <TitleBar
          label={`欢迎你, ${ coreProfile.fullName ||'' }`}
        />
        <div className={style.list}>
					<div>
            <div dangerouslySetInnerHTML={{__html: this.template(prologue)}}/>
					</div>
          <div className={style.next}>
            <p>点击下一步，补充你的个人信息</p>
          </div>
        </div>
        <Button 
          label="下一步" 
          className={styleRoot.next} 
          onClick={() => this.props.router.push('/onboarding/staff/fill')}/>
      </div>
    )
  }
}
